<!--
 * @Descripttion: 记账凭证金额输入
 * @version: V1.0
 * @Author: GW
 * @Date: 2022-04-22 16:00:22
 * @LastEditors: GW
 * @LastEditTime: 2022-04-23 14:07:26
-->
<template>
    <div ref="searchInput">
        <a-input ref="searchWrapper" maxLength="10" v-show="tableShow" style="position: fixed;z-index:63;text-align:right" onkeyup="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)" v-model="value" @change="handleChange" @pressEnter="check" @blur="check"></a-input>
        <div class="edit-mask" v-show="tableShow" @click="closeSearch" style="position:fixed;width:100%;height:100%;top:0;left:0;bottom:0;right:0;background:rgba(254,56,89,0);z-index:62">

        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            tableShow: false,
            value: null
        }
    },
    props: {
        value: {
            type: String,
            default: null
        },
        colType: {
            type: String,
            default: null
        }
    },
    methods: {
        showModal (width) {
            let w = document.body.clientWidth;//当前可视窗口宽度
            let searchInput = this.$refs.searchInput.getBoundingClientRect();


            console.log(document.getElementsByClassName('ant-table-row-cell-ellipsis')[3].getBoundingClientRect())
            let leftpx = {};
            if (this.colType == 'debitAmount') {
                //借方金额输入框位置
                leftpx = document.getElementsByClassName('ant-table-row-cell-ellipsis')[3].getBoundingClientRect();
            } else {
                //贷方金额输入框位置
                leftpx = document.getElementsByClassName('ant-table-row-cell-ellipsis')[4].getBoundingClientRect();
            }

            this.$refs.searchWrapper.$el.style.top = searchInput.top + 'px';
            this.$refs.searchWrapper.$el.style.left = leftpx.left + 'px';
            this.$refs.searchWrapper.$el.style.width = width;

            this.tableShow = true;
            this.$nextTick(() => {
                this.$refs.searchWrapper.focus();
            })
        },
        closeSearch () {
            this.tableShow = false;
            this.$emit('check')
        },
        handleChange (e) {
            const value = e.target.value;
            this.value = value;
            this.$emit('change', e)
        },
        check () {
            this.$emit('check')
        },
    }
}
</script>